<template>
<el-container style="height: 100%;">
  <el-aside width="230px" style="height: 100%; background-color: #fff;">
    <el-menu unique-opened style="width: 230px; height: 100%; position: fixed !important;">
      <div class="logo">
        <img src="@/assets/logo.svg" style="hegiht: 100px; width: 100px;"/>
        <p style="color: #606266; font-size: 20px; font-weight: blod; letter-spacing: 2px; margin-top: 12px;">教务管理系统</p>
      </div>
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-s-custom"></i>教师管理</template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title"><i class="el-icon-user-solid"></i>学生管理</template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="2-1">选项1</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="2-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title"><i class="el-icon-school"></i>教室管理</template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="2-1">选项1</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="2-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
    </el-menu>
  </el-aside>

  <el-container style="height: 100%;">
    <el-header style="text-align: right; font-size: 12px">
      <el-tag size=small effect=dark style="margin-right: 1px;">管理员</el-tag>
      <el-dropdown>
        <span>
          zklcdc<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人信息</el-dropdown-item>
          <el-dropdown-item>设置</el-dropdown-item>
          <el-dropdown-item>退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>

    <el-main>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-breadcrumb separator="/" style="margin-top: 12px; margin-left: 8px;">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item><a href="/">学生管理</a></el-breadcrumb-item>
                <el-breadcrumb-item>考勤管理</el-breadcrumb-item>
              </el-breadcrumb>
            </el-col>
            <el-col :span="16">
              <el-input
                size="medium"
                placeholder="搜索学生"
                prefix-icon="el-icon-search"
                clearable
                v-model="searchParams.name"
                @change="handleSearch()"
                style="width: 180px; float: right;">
              </el-input>
              <el-date-picker
                v-model="searchParams.DataRange"
                size="medium"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
                @change="handleSearch()"
                style="float: right; margin-right: 10px;">
              </el-date-picker>
              <el-button type="primary" size="small" icon="el-icon-s-data" style="float: right; margin-top: 2px; margin-right: 10px;" @click="isStatistics = true">统计</el-button>
            </el-col>
          </el-row>
        </div>
        <el-table
          v-loading="loading"
          :data="tableData.data"
          stripe
          key="table"
          style="width: 100%">
          <el-table-column
            label="日期"
            sortable
            sort-by="date">
            <template slot-scope="scope">
              <span v-show="!scope.row.isEditing">{{ scope.row.date }}</span>
              <el-date-picker
                v-show="scope.row.isEditing"
                v-model="scope.row.date"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column
            label="姓名"
            sortable
            sort-by="name">
            <template slot-scope="scope">
              <span v-show="!scope.row.isEditing">{{ scope.row.name }}</span>
              <el-input
                placeholder="请输入姓名"
                v-model="scope.row.name"
                v-show="scope.row.isEditing"
                clearable
                style="width: 200px">
              </el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="节数">
            <template slot-scope="scope">
              <span v-show="!scope.row.isEditing">{{ scope.row.ClassRange[0] }} <strong>至</strong> {{ scope.row.ClassRange[1] }}</span>
              <div v-show="scope.row.isEditing">
                <el-input placeholder="节数" v-model.number="scope.row.ClassRange[0]" type="number" min="1" max="10" style="width: 60px"></el-input> 至 <el-input placeholder="节数" v-model.number="scope.row.ClassRange[1]" type="number" min="1" max="10" style="width: 60px"></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="课程名称"
            sortable
            sort-by="course">
            <template slot-scope="scope">
              <span v-show="!scope.row.isEditing">{{ scope.row.course }}</span>
              <el-input
                placeholder="请输入课程名称"
                v-model="scope.row.course"
                v-show="scope.row.isEditing"
                clearable
                style="width: 200px">
              </el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="缺勤类型"
            sortable
            sort-by="type">
            <template slot-scope="scope" >
              <span v-show="!scope.row.isEditing">{{ scope.row.type }}</span>
              <el-select
                v-model="scope.row.type"
                placeholder="请选择缺勤类型"
                v-show="scope.row.isEditing">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="180">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                v-show="!scope.row.isEditing"
                @click="EnterEditStatus(scope)">编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                v-show="!scope.row.isEditing"
                @click="handleDelete(scope)">删除</el-button>
              <el-button
                size="mini"
                type="primary"
                v-show="scope.row.isEditing"
                @click="handleEdit(scope)"
                style="margin-left: 0px;">保存</el-button>
              <el-button
                size="mini"
                v-show="scope.row.isEditing"
                @click="ExitEditStatus(scope)">取消</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div>
        <el-button type="primary" icon="el-icon-plus" style="margin-top: 15px;" @click="isAdding = true">新增</el-button>
        <el-pagination
          :total="tableData.total"
          :current-page.sync="page"
          :page-size="15"
          :page-sizes="[15, 30, 50, 100]"
          layout="sizes, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          style="margin-top: 20px; margin-right: 10px; float: right;">
        </el-pagination>
        </div>
      </el-card>
      <el-dialog
        title="添加缺勤记录"
        :visible.sync="isAdding"
        width="50%">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-form-item prop="date" label="日期">
            <el-date-picker
              v-model="form.date"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="name" label="姓名">
            <el-input v-model="form.name" placeholder="请输入姓名" clearable style="width: 220px;"></el-input>
          </el-form-item>
          <el-form-item label="缺勤节数" required>
            <el-col :span="8">
              <el-form-item prop="ClassRange[0]">
                <el-input placeholder="请输入开始节数" v-model.number="form.ClassRange[0]" type="number" min="1" max="10">
                  <template slot="prepend">第</template>
                  <template slot="append">节</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="1" style="text-align: center">至</el-col>
            <el-col :span="8">
              <el-form-item prop="ClassRange[1]">
                <el-input placeholder="请输入结束节数" v-model.number="form.ClassRange[1]" type="number" min="1" max="10">
                  <template slot="prepend">第</template>
                  <template slot="append">节</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="课程名称" prop="course">
            <el-input v-model="form.course" placeholder="请输入课程名称" clearable style="width: 220px;"></el-input>
          </el-form-item>
          <el-form-item label="类型" prop="type">
            <el-select v-model="form.type" placeholder="请选择缺勤类型" style="width: 220px;">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.value"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="isAdding = false">取消</el-button>
          <el-button type="primary" @click="handleAdd()">保存</el-button>
        </div>
      </el-dialog>
      <el-dialog
        :visible.sync="isStatistics"
        width="50%"
        @open="getStatisticsData()">
        <template slot="title" slot-scope="scope">
              <span>统计缺勤记录</span>
              <el-date-picker
                v-model="searchParams.DataRange"
                size="medium"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
                @change="getStatisticsData()"
                style="width: 320px; margin-left: 10px;">
              </el-date-picker>
        </template>
        <el-table
          :data="StatisticsData"
          stripe
          style="width: 100%">
          <el-table-column
            prop="date"
            label="日期"
            sortable>
          </el-table-column>
          <el-table-column
            prop="course"
            label="课程名称"
            sortable>
          </el-table-column>
          <el-table-column
            prop="num"
            label="缺勤人数"
            sortable>
          </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="isStatistics = false">确定</el-button>
        </div>
      </el-dialog>
    </el-main>

    <el-footer class="footer">
      <p>Copyright © 2021 <el-link type="primary" :underline="false" href="https://www.hfut.edu.cn/" style="margin-top: -2px;">合肥工业大学</el-link> - 教务管理系统</p>
      <p style="margin-top: -10px;">Powered by <el-link type="primary" :underline="false" href="https://blog.zklcdc.top/" style="margin-top: -4px;">Harry-zklcdc</el-link>&nbsp; <span v-if="version"> Version: {{ version }}</span></p>
    </el-footer>
  </el-container>
</el-container>
</template>

<script>
import api from '@/api'
export default {
  data () {
    var checkClassRange1 = (rule, value, callback) => {
      console.log(value)
      if (value === '' || value === undefined) {
        callback(new Error('请输入开始节数'))
      } else if (!Number.isInteger(value)) {
        callback(new Error('请输入数字'))
      } else if (value > 10 || value < 1) {
        callback(new Error('从第 1 到 第 10 节课'))
      }
    }
    var checkClassRange2 = (rule, value, callback) => {
      if (value === '' || value === undefined) {
        callback(new Error('请输入结束节数'))
      } else if (!Number.isInteger(value)) {
        callback(new Error('请输入数字'))
      } else if (value > 10 || value < 1) {
        callback(new Error('从第 1 到 第 10 节课'))
      } else if (value < this.form.ClassRange[0]) {
        callback(new Error('需小于等于开始节数'))
      }
    }
    return {
      tableData: {},
      StatisticsData: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      rules: {
        name: [
          { required: true, message: '请输入学生姓名', trigger: 'blur' },
          { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
        ],
        date: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'blur' }
        ],
        ClassRange: [
          [
            { validator: checkClassRange1, trigger: 'blur' }
          ], [
            { validator: checkClassRange2, trigger: 'blur' }
          ]
        ],
        course: [
          { required: true, message: '请输入课程名称', trigger: 'blur' },
          { min: 2, max: 12, message: '长度在 2 到 12 个字符', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择缺勤类型', trigger: 'blur' }
        ]
      },
      form: {
        date: '',
        name: '',
        course: '',
        ClassRange: [],
        type: ''
      },
      options: [{
        value: '旷课'
      }, {
        value: '迟到'
      }, {
        value: '早退'
      }],
      version: process.env.VERSION,
      DataRange: [],
      name: '',
      offset: 0,
      limit: 15,
      page: 1,
      searchParams: {},
      isAdding: false,
      isStatistics: false,
      loading: true
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.getData()
    },
    getData () {
      this.loading = true
      api.GetData(this.offset, this.limit, this.searchParams).then(res => {
        this.tableData = res.data
      })
      this.loading = false
    },
    getStatisticsData () {
      api.StatisticsData(this.searchParams).then(res => {
        this.StatisticsData = res.data
      })
    },
    EnterEditStatus (scope) {
      this.$set(scope.row, 'isEditing', true)
    },
    ExitEditStatus (scope) {
      this.$set(scope.row, 'isEditing', false)
    },
    handleAdd () {
      let data = Object.assign({}, this.form)
      // if (data.date === null || data.date === undefined) { this.$message({ type: 'error', message: '请选择日期' }); return }
      if (data.name === '' || data.name === undefined) { this.$message({ type: 'error', message: '请输入学生姓名' }); return }
      if (data.ClassRange[0] === '' || data.ClassRange[0] === undefined) { this.$message({ type: 'error', message: '请输入开始节数' }); return }
      if (data.ClassRange[0] < 1 || data.ClassRange[0] > 10) { this.$message({ type: 'error', message: '从第 1 到 第 10 节课' }); return }
      if (data.ClassRange[1] === '' || data.ClassRange[1] === undefined) { this.$message({ type: 'error', message: '请输入结束节数' }); return }
      if (data.ClassRange[1] < 1 || data.ClassRange[1] > 10) { this.$message({ type: 'error', message: '从第 1 到 第 10 节课' }); return }
      if (data.ClassRange[0] > data.ClassRange[1]) { this.$message({ type: 'error', message: '从第 1 到 第 10 节课' }); return }
      if (data.course === '' || data.course === undefined) { this.$message({ type: 'error', message: '请输入课程名称' }); return }
      if (data.type === '' || data.type === undefined) { this.$message({ type: 'error', message: '结束节数需小于等于开始节数' }); return }
      api.AddData(data).then(() => {
        this.$message({
          type: 'success',
          message: '添加成功!'
        })
        this.offset = 0
        this.page = 1
        this.getData()
        this.form.date = ''
        this.form.name = ''
        this.form.type = ''
        this.form.course = ''
        this.form.ClassRange = []
      }).catch(() => {
        this.$message({
          type: 'warning',
          message: '添加失败!'
        })
        this.getData()
      })
      this.$set(this, 'isAdding', false)
    },
    handleEdit (scope) {
      let data = Object.assign({}, scope.row)
      if (data.date === null || data.date === undefined) { this.$message({ type: 'error', message: '请选择日期' }); return }
      if (data.name === '' || data.name === undefined) { this.$message({ type: 'error', message: '请输入学生姓名' }); return }
      if (data.ClassRange[0] === '' || data.ClassRange[0] === undefined) { this.$message({ type: 'error', message: '请输入开始节数' }); return }
      if (data.ClassRange[1] === '' || data.ClassRange[1] === undefined) { this.$message({ type: 'error', message: '请输入结束节数' }); return }
      if (data.course === '' || data.course === undefined) { this.$message({ type: 'error', message: '请输入课程名称' }); return }
      if (data.type === '' || data.type === undefined) { this.$message({ type: 'error', message: '请选择缺勤类型' }); return }
      api.EditData(data).then(res => {
        scope.row = res.data
        this.$message({
          type: 'success',
          message: '保存成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'warning',
          message: '保存失败!'
        })
        this.getData()
      })
      this.$set(scope.row, 'isEditing', false)
    },
    handleDelete (scope) {
      this.$confirm('此操作将永久删除该本条记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.DeleteData(scope.row.id).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'warning',
            message: '删除失败!'
          })
        })
        this.getData()
      })
    },
    handleSizeChange (val) {
      this.limit = val
      this.offset = 0
      this.page = 1
      this.getData()
    },
    handleCurrentChange (val) {
      this.offset = this.limit * (val - 1)
      this.getData()
    },
    handleSearch () {
      this.offset = 0
      this.page = 1
      this.getData()
    }
  }
}
</script>

<style>
  .el-header {
    background-color: #fff;
    color: #333;
    line-height: 60px;
  }

  .el-main {
    background-color: #eee;
  }

  .el-aside {
    color: #fff;
  }

  .logo {
    margin: 30px 0;
    text-align: center;
    img {
      background-color: #fff;
      border-radius: 50%;
      border: 3px solid #fff;
      width: 75px;
      height: 75px;
    }
  }

  .footer {
    margin-top: 20px;
    margin-bottom: 10px;
    text-align: center;
    font-size: 14px;
  }
</style>
